import { defineComponent, reactive, ref, onMounted } from "vue";
import styles from "./forget.module.less";
import { imgPath } from "@/common/utils";
import { useRouter } from "vue-router";
import { EyeOutlined, InfoCircleOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import validateInstance from "@/libs/validate/validate";
import { useStore as useUserStore } from "@/store/user";
import useSendResetSms from "@/hooks/useSendResetSms";
import { $resetPwd } from "@/api/forget/forget";
export default defineComponent({
  name:'forget',
  setup() {
    const sendResetSms = useSendResetSms();
    const router = useRouter();
    const userStore = useUserStore();
    //头部
    const Header = () => (
      <div class={styles['header-box']}>
        <div class={styles.header}>
          <img class={styles.logo} src={imgPath('/logo.png')} onClick={() => { router.push('/') }} />
        </div>
      </div>
    )

    const state = reactive({
      mobile: '',//手机号
      syncCode: '',//短信验证码
      password: '',//密码
      showPassword: false,
      password2: '',
      showPassword2: false,
      level: [],
      status: false,
    } as any);


    //获取验证码
    const getSend = () => {
      sendResetSms.sendSms(state.mobile);
    }
    //密码强度验证
    const passwordIntensity = () => {
      state.level = [];
      //效验字母
      const regex = /^[A-Za-z]+$/;
      //效验符号
      const regex1 = /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$/;
      if (validateInstance.test(state.password, 'number')) {
        state.level.push('low')
      } else if (regex.test(state.password)) {
        state.level.push('low')
      } else if (regex1.test(state.password)) {
        state.level.push('low')
      } else if (/^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、0-9]+$/.test(state.password)) {
        state.level.push('low')
        state.level.push('middle')
      } else if (/^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z]+$/.test(state.password)) {
        state.level.push('low')
        state.level.push('middle')
      } else if (/^[A-Za-z0-9]+$/.test(state.password)) {
        state.level.push('low')
        state.level.push('middle')
      } else if (/^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、0-9A-Za-z]+$/.test(state.password)) {
        state.level.push('low')
        state.level.push('middle')
        state.level.push('high')
      }
    }

    //确认
    const confirm = () => {
      if (!state.mobile) {
        message.error('请输入手机号')
        return;
      }
      if (!validateInstance.test(state.mobile, "phone")) {
        message.error('手机号格式错误,请重新填写');
        return;
      }
      if (!state.syncCode) {
        message.error('请输入短信验证码');
        return;
      }
      if (state.password.length < 8) {
        message.error('密码少于8位')
        return;
      }
      if (state.password2 !== state.password) {
        message.error('密码不一致');
        return;
      }
      $resetPwd({
        mobile:state.mobile,
        code:state.syncCode,
        repassword:state.password,
        new_password:state.password2,
      }).then((res: any) => {
        message.success('重置密码成功')
        router.go(-1)
      })
    }

    //主体内容
    const Main = () => (
      <div class={styles['main-box']}>
        <div class={styles.main}>
          <div class={styles['main-title']}>
            <div class={styles['title-left']}>忘记密码</div>
            <div class={styles['title-right']}>
            </div>
          </div>
          <div class={styles['login-form']}>
            <div class={styles['form-row']}>
              <div class={styles['row-label']}>手机号：</div>
              <div class={styles['row-input']}>
                <input placeholder="请输入手机号" v-model={state.mobile} maxlength={11}/>
              </div>
            </div>
            <div class={styles['form-row']}>
              <div class={styles['row-label']}>短信验证码：</div>
              <div class={styles['row-input']}>
                <input placeholder="请输入短信验证码" v-model={state.syncCode} />
              </div>
              <div class={[styles['send-btn']]} onClick={() => { getSend() }}>{sendResetSms.show_text.value}</div>
            </div>
            <div class={styles['form-row']}>
              <div class={styles['row-label']}>设置密码：</div>
              <div class={styles['row-input']}>
                <input type={state.showPassword ? 'text' : 'password'} placeholder="请输入密码" v-model={state.password} onBlur={() => { passwordIntensity() }} />
                <EyeOutlined class={[styles['field-icon'], styles.hoverable]} onClick={() => { state.showPassword = !state.showPassword }} />
              </div>
            </div>
            <div class={styles.tips}>
              <InfoCircleOutlined />
              <span>密码为大于8位字母、数字和特殊符号（!@#$%^&*）三者组合</span>
            </div>
            <div class={styles['form-row']}>
              <div class={styles['row-label']}>确认密码：</div>
              <div class={styles['row-input']}>
                <input type={state.showPassword2 ? 'text' : 'password'} placeholder="请输入密码" v-model={state.password2} />
                <EyeOutlined class={[styles['field-icon'], styles.hoverable]} onClick={() => { state.showPassword2 = !state.showPassword2 }} />
              </div>
            </div>
            <div class={styles.intensity}>
              <span class={[styles.line, state.level.includes('low') && styles.low]}>弱</span>
              <span class={[styles.line, state.level.includes('middle') && styles.middle]}>中</span>
              <span class={[styles.line, state.level.includes('high') && styles.high]}>强</span>
            </div>
            <div class={styles['btn-box']}>
              <div class={[styles.btn]} onClick={() => { router.go(-1) }}>取消</div>
              <div class={[styles.btn, styles.confirm]} onClick={() => { confirm() }}>确认</div>
            </div>
          </div>
        </div>
      </div>
    )

    onMounted(() => {

    })

    return () => (
      <div class={styles.forget}>
        <Header />
        <Main />
      </div>
    )
  }
})